import { Endpoint } from 'butterfly-dag'
import { v4 as uuidv4 } from 'uuid'
import $ from 'jquery'

class BaseEndpoint extends Endpoint {
  [x: string]: any
  constructor(opts) {
    if (opts.pointType === 'output') {
      opts.limitNum = 1000
    }
    super(opts)
    this.pointType = opts.pointType
    this.expand = opts.expand || true
  }

  mounted = () => {
    //监听node的隐藏事件
    this.on('nodeHideEvent', (data) => {
      if (this.nodeId == data.node.id) {
        if (data.hide) {
          $(this.dom).hide()
        } else {
          $(this.dom).show()
        }
      }
    })
  }
  draw(obj) {
    let point = super.draw(obj)
    if (obj.options.pointType === 'input') {
      //输入point
      const _dom = `<div class="input-point" id="${this.id}"><span class="point-right-title">${obj.options.title}</span></div>`
      point = $(_dom)
    } else if (obj.options.pointType === 'output') {
      const right = obj.options.title.length * 12 + 8
      //输出point
      const _dom = `<div class="output-point" id="${this.id}"><span class="point-left-title" style="right:${right}px">${obj.options.title}</span></div>`
      point = $(_dom)
    } else if (obj.options.pointType === 'start') {
      const _title = obj.options.title || '流入'
      //运行接入point
      const _dom = `<div class="run-start-point" id="${this.id}"><span class="point-right-title">${_title}</span></div>`
      point = $(_dom)
    } else if (obj.options.pointType === 'end') {
      const _title = obj.options.title || '流出'
      const right = _title.length * 12 + 8
      //运行接入point
      const _dom = `<div class="run-end-point" id="${this.id}"><span class="point-left-title" style="right:${right}px">${_title}</span></div>`
      point = $(_dom)
      // 运行接出point
      $(point).addClass('run-end-point')
    }

    return point
  }

  linkable() {
    if (this.limitNum != this.connectedNum) {
      if (this.options.pointType === 'input') {
        // 输入point
        $(this.dom).addClass('input-point-linkable')
      } else if (this.options.pointType === 'output') {
        //输出point
        $(this.dom).addClass('output-point-linkable')
      } else if (this.options.pointType === 'start') {
        // 运行接入point
        $(this.dom).addClass('run-start-point-linkable')
      } else if (this.options.pointType === 'end') {
        // 运行接出point
        $(this.dom).addClass('run-end-point-linkable')
      }
    }
  }

  unLinkable() {
    if (this.options.pointType === 'input') {
      // 输入point
      $(this.dom).removeClass('input-point-linkable')
    } else if (this.options.pointType === 'output') {
      //输出point
      $(this.dom).removeClass('output-point-linkable')
    } else if (this.options.pointType === 'start') {
      // 运行接入point
      $(this.dom).removeClass('run-start-point-linkable')
    } else if (this.options.pointType === 'end') {
      // 运行接出point
      $(this.dom).removeClass('run-end-point-linkable')
    }
  }

  hoverLinkable() {
    if (this.options.pointType === 'input') {
      // 输入point
      $(this.dom).addClass('input-point-hover')
    } else if (this.options.pointType === 'output') {
      //输出point
      $(this.dom).addClass('output-point-hover')
    } else if (this.options.pointType === 'start') {
      // 运行接入point
      $(this.dom).addClass('run-start-point-hover')
    } else if (this.options.pointType === 'end') {
      // 运行接出point
      $(this.dom).addClass('run-end-point-hover')
    }
  }

  unHoverLinkable() {
    if (this.options.pointType === 'input') {
      // 输入point
      $(this.dom).removeClass('input-point-hover')
    } else if (this.options.pointType === 'output') {
      //输出point
      $(this.dom).removeClass('output-point-hover')
    } else if (this.options.pointType === 'start') {
      // 运行接入point
      $(this.dom).removeClass('run-start-point-hover')
    } else if (this.options.pointType === 'end') {
      // 运行接出point
      $(this.dom).removeClass('run-end-point-hover')
    }
  }
}

export default BaseEndpoint
